<template>
	<div class="login">
		<div class="left-img">
			<span>——<br>每个人都能感受到温暖的医疗体验</span>
		</div>
		<div class="right-form">
			<div class="form-title">账号登录</div>
			<el-form ref="form">
				<el-form-item>
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.passWord"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.validationCode"></el-input>
				</el-form-item>
			</el-form>
			<div class="keep-login">
				<el-checkbox label="保持登录一个月" name="type"></el-checkbox>
			</div>
			<div class="login-button">
				<el-button type="primary" round @click="onSubmit" >登录</el-button>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'Login',
		data() {
			return {
				form: {
					name: "sinohealth",
					passWord: "123456",
					validationCode: "5677"
				}
			}
		},
		methods: {
			onSubmit() {
				console.log("123");
				this.$router.push({
					name: "Index"
				})
			}
		}
	}
</script>
<style scoped>
	.login {
		height: 100%;
		overflow: hidden;
		position: relative;
	}

	.left-img {
		height: 100%;
		margin-right: 480px;
		background-image: url(../assets/img/loginbg.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		color: #fff;
		font-size: 40px;
		padding: 160px 0 0 101px;
		text-align: left;
	}

	.right-form {
		position: absolute;
		top: 0;
		right: 0;
		width: 480px;
		height: 100%;
		padding: 197px 62px 0 93px;
	}

	.form-title {
		font-size: 40px;
		font-weight: 400;
		margin-bottom: 45px;
		text-align: left;
	}
	
	.keep-login{
		text-align: left;
		margin-bottom: 27px;
	}
	
	.login-button{
		text-align: left;
	}
	
	.login-button button{
		width:100%;
	}
</style>
